<template>
  <div style="height: 100%; display: flex; flex-direction: column;">
    <BreadFadeWidget
      ref="refBread"
      :start-index="2"
      style="padding: 8px 4px 0 8px"
      :root-path="config.rootItem"
      :detail-label="config.detail"
      :trigger-path="triggerPath"
    />
    <TableHeaderWidget :header="current().name" />
    <UserList
      ref="refList"
      v-show="config.isRoot"
      :load-user="loadUser"
      :save-user="saveUser"
      :can-edit="true"
      :create-label="'新增用户'"
      :entry="{server: SERVERS.REALM, name: currentNames.REALM_USER}"
    />
    <UserDetail v-show="!config.isRoot" ref="refDetail" />
  </div>
</template>

<script setup lang="ts" name="realmUserList">
import {currentNames, SERVERS} from '@/stores/conf'
import {useListPage} from '@/utils/UseListPage'
import TableHeaderWidget from '@/widget/TableHeaderWidget.vue'
import BreadFadeWidget from '@/widget/BreadFadeWidget.vue'
import UserList from '@/widget/list/UserList.vue'
import UserDetail from '@/views/pages/realms/RealmUserDetail.vue'
import {loadRealmUserPage, saveRealmUser} from '@/apis'
import {useStore} from "@/stores";
import {toRaw} from "vue";

const store = useStore();

const loadUser = async (params: any) => {
  const realms: any = store.getCurrentRealms();
  const result = await loadRealmUserPage({
    realmId: realms.id,
    ...params
  });

  return result;
}

const saveUser = async (user: any) => {
  return await saveRealmUser(toRaw(user));
}

const config = {
  isRoot: true,
  detail: '用户详情',
  watchRealm: true,
  rootItem: { id: '', name: '用户列表' }
}

const {refBread, refList, refDetail, current, triggerPath} = useListPage(currentNames.REALM_USER, config);

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}
</style>
